<template>
  <n-form ref="formRef" :model="formModel" label-placement="top">
    <n-grid :cols="2" :x-gap="12">
      <n-form-item-gi
        :span="isMyBatisPlus ? 2 : 1"
        label="基本包"
        path="parentPackage"
      >
        <n-input
          v-model:value="formModel.parentPackage"
          placeholder="示例：com.xxx.dao"
        />
      </n-form-item-gi>
      <n-form-item-gi label="表前缀" path="tablePrefix" v-show="isMyBatisPlus">
        <n-input
          v-model:value="formModel.tablePrefix"
          placeholder="示例：user_"
        />
      </n-form-item-gi>
      <n-form-item-gi
        label="字段前缀"
        path="fieldPrefix"
        v-show="isMyBatisPlus"
      >
        <n-input
          v-model:value="formModel.fieldPrefix"
          placeholder="示例：user_"
        />
      </n-form-item-gi>
      <n-form-item-gi
        label="逻辑删除字段"
        path="logicDeleteFill"
        v-show="isMyBatisPlus"
      >
        <n-input
          v-model:value="formModel.logicDeleteFill"
          placeholder="示例：is_deleted"
        />
      </n-form-item-gi>
      <n-form-item-gi
        label="新增和更新时自动填充字段"
        path="insertUpdateFill"
        v-show="isMyBatisPlus"
      >
        <n-input
          v-model:value="formModel.insertUpdateFill"
          placeholder="示例：updated_by,updated_at（使用半角逗号分割）"
        />
      </n-form-item-gi>
      <n-form-item-gi
        label="新增时自动填充字段"
        path="insertFill"
        v-show="isMyBatisPlus"
      >
        <n-input
          v-model:value="formModel.insertFill"
          placeholder="示例：created_by,created_at（使用半角逗号分割）"
        />
      </n-form-item-gi>
      <n-form-item-gi
        label="更新时自动填充字段"
        path="updateFill"
        v-show="isMyBatisPlus"
      >
        <n-input
          v-model:value="formModel.updateFill"
          placeholder="示例：updated_by,updated_at（使用半角逗号分割）"
        />
      </n-form-item-gi>
      <n-form-item-gi label="作者" path="author">
        <n-input v-model:value="formModel.author" placeholder="示例：heycm" />
      </n-form-item-gi>
      <n-form-item-gi label="其他" v-show="isMyBatisPlus">
        <n-space>
          <n-checkbox v-model:checked="formModel.useSwagger2"
            >使用Swagger2</n-checkbox
          >
          <n-checkbox v-model:checked="formModel.useLombok"
            >使用Lombok</n-checkbox
          >
        </n-space>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { Generator } from "@/types/interfaces";
import { GENERATOR_FORM_CACHE } from "@/types/constant";
const { generator } = defineProps<{ generator: string }>();
const isMyBatisPlus = computed((): boolean => generator === "MyBatis Plus");
const GENERATOR_FORM_CACHE_KEY = computed(
  (): string => GENERATOR_FORM_CACHE + generator.replace(/\s/g, "")
);
import { debounce } from "@/utils/function";

const formModel = ref<Generator>({
  generator: generator,
  parentPackage: null,
  tablePrefix: null,
  fieldPrefix: null,
  logicDeleteFill: null,
  insertUpdateFill: null,
  insertFill: null,
  updateFill: null,
  useSwagger2: null,
  useLombok: null,
  author: null,
  tables: [],
});

onMounted(() => {
  loadFormCache();
});

// 设置缓存
const setFormCache = (data: Generator) => {
  localStorage.setItem(GENERATOR_FORM_CACHE_KEY.value, JSON.stringify(data));
};
// 加载缓存
const loadFormCache = () => {
  const cache = localStorage.getItem(GENERATOR_FORM_CACHE_KEY.value);
  if (cache) {
    formModel.value = {
      ...JSON.parse(cache),
    };
  }
};

// 监听表单变化，响上传值
const emit = defineEmits(["formHandle"]);
const formWatch = (value: Generator) => {
  emit("formHandle", value);
  setFormCache(value);
};
watch(
  () => formModel,
  (newValue) => {
    const debounceFormWatch = debounce(formWatch, 500);
    debounceFormWatch(newValue.value);
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped></style>
